<template>
  <el-dialog :title="formData.id ? '编辑部门':'新增部门'" :visible="isShowDialog" @close="btnCancel">
    <!-- 匿名插槽 -->
    <!-- 校验的三个数据 el-form 绑定 model rules
    el-form-item 绑定 prop -->
    <el-form ref="addDepts" :model="formData" :rules="rules" label-width="120px">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="formData.name" style="width: 80%" placeholder="1-50个字符" />
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model="formData.code" style="width: 80%" placeholder="1-50个字符" />
      </el-form-item>
      <el-form-item label="部门负责人">
        <el-select v-model="formData.manager" style="width: 80%" placeholder="请选择">
          <el-option v-for="user in employeeList" :key="user.id" :value="user.username" />
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduse">
        <el-input
          v-model="formData.introduce"
          style="width: 80%"
          placeholder="1-300个字符"
          type="textarea"
          :rows="3"
        />
      </el-form-item>
    </el-form>
    <!-- el-dialog有专门放置底部操作栏的 插槽  具名插槽 -->
    <el-row slot="footer" type="flex" justify="center">
      <!-- 列被分为24 -->
      <el-col :span="6">
        <el-button type="primary" size="small" @click="btnOK">{{ $t('btnOK') }}</el-button>
        <el-button size="small" @click="btnCancel">{{ $t('btnCancel') }}</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import { getEmployeeSimple } from '@/api/employees'
import { addDepts, getDeptsDetail, editDepts, getDeptsList } from '@/api/departments'
export default {
  props: {
    isShowDialog: {
      type: Boolean,
      default: false
    },
    nodeData: {
      type: Object,
      required: true
    }
  },
  data() {
    const checkRepeatCode = async(rule, val, callbak) => {
      const { depts } = await getDeptsList()
      console.log('部门列表', depts)
      // 区分新增和编辑状态
      let isRepeat
      if (this.formData.id) {
        // 编辑
        // 重复的条件是, code 相同 id 不同, 才是真正重复
        isRepeat = depts.some(item => item.code === val && item.id !== this.formData.id)
      } else {
        // 新增
        isRepeat = depts.some(item => item.code === val)
      }
      // 根据结果进行后续处理
      if (isRepeat) {
        // 失败
        callbak(new Error('全公司部门编码必须唯一'))
      } else {
        callbak()
      }
    }
    const checkRepeatName = async(rule, val, callbak) => {
      const { depts } = await getDeptsList()
      let isRepeat

      if (this.formData.id) {
        // 编辑
        // 拿到全部部门，先用正在编辑的pid筛选出同级部门
        isRepeat = depts
        // 找出兄弟
        const myBrothers = depts.filter(item => item.pid === this.formData.pid)
        isRepeat = myBrothers.some(item => item.name === val && item.id !== this.formData.id)
      } else {
        // 新增
        isRepeat = depts
        // 拿到全部部门，点击id筛选下属部门
        const mySons = depts.filter(item => item.pid === this.nodeData.id)
        isRepeat = mySons.some(item => item.name === val)
      }
      if (isRepeat) {
        callbak(new Error('该项不能重复'))
      } else {
        callbak
      }
    }

    return {
      formData: {
        code: '',
        introduce: '',
        manager: '',
        name: ''
      },
      rules: {
        code: [
          { required: true, $message: '该项不能为空', trigger: 'blur' },
          { max: 50, $message: '最多不能超过50个字符', trigger: 'blur' },
          { validator: checkRepeatCode, trigger: 'blur' }
        ],
        name: [
          { required: true, $message: '该项不能为空', trigger: 'blur' },
          { max: 50, $message: '最多不能超过50个字符', trigger: 'blur' },
          { validator: checkRepeatName, trigger: 'blur' }

        ],
        introduce: [
          { required: true, $message: '该项不能为空', trigger: 'blur' },
          { max: 300, $message: '最多不能超过50个字符', trigger: 'blur' }

        ]
      },
      employeeList: []
    }
  },
  async created() {
    this.employeeList = await getEmployeeSimple()
  },
  methods: {
    // 发请求
    async btnOk() {
      // 校验表单后再发送请求
      await this.$refs.addDepts.validate()
      // await addDepts({
      //   ...this.formData,
      //   pid: this.nodeData.id
      // })
      if (this.formData.id) {
        // 编辑
        await editDepts(this.formData)
      } else {
        // 新增
        await addDepts({
          ...this.formData,
          pid: this.nodeData.id
        })
      }
      // 提示用户
      await this.$message.success('操作成功')
      // 关闭弹窗
      //   this.isShowDialog = false
      //   this.$emit('closeDialog')
      await this.$emit('update:isShowDialog', false)
      // 更新页面
      this.$emit('reloadPage')
    },
    btnCancel() {
      // 清理数据
      this.formData = {
        code: '',
        introduce: '',
        manager: '',
        name: ''
      }
      // 清理报错
      this.$refs.addDepts.resetFields()
      //   关闭弹窗
      this.$emit('update:isShowDialog', false)
    },
    async getDeptsDetail(nodeData) {
      // 假设这里是一个回显数据的函数
      // 每当回显时就需要调用这个
      // foemData就会改变
      console.log('假设已经填充完毕')

      this.formData = await getDeptsDetail(nodeData.id)
    }
  }
}
</script>

<style>
</style>
